<template>
  <!-- loading -->
  <LoadingPage v-if="['beforeInit', 'init', 'loading', 'opened', 'error', 'init'].includes(ttsa?.process)" />
  <!-- 引导页 -->
  <LaunchPage v-if="['beforeStart'].includes(ttsa?.process)" />
  <!-- 字幕 -->
  <XSubtitle />
  <!-- UI卡片 -->
  <UiEventCard />
  <!-- Logo -->
  <Logo />

  <!-- <Finger v-show="showFinger" :class="$style['finger']" /> -->

  <template v-if="ttsa.hasController">
    <!-- peek节点信息 -->
    <PeekBack />
    <!-- 导航 / 目录 -->
    <x-nav-bar />
    <!-- 清晰度 -->
    <XDefinition v-if="ttsa.controller" />
    <!-- 问答组件 -->
    <video-controller />
  </template>
</template>

<script lang="ts" setup name="MainPage">
import { useTtsaStore } from "@/store/ttsa";
import { noPullPage } from '@/utils/client'

// hooks
const ttsa = useTtsaStore();

// const showFinger = ref(false);

// const setFiger = () => {
//   if (!ttsa.controller) return
//   showFinger.value = true
//   const timerF = setTimeout(() => {
//     ttsa.showController()
//     showFinger.value = false
//     clearTimeout(timerF)
//   }, 1900)
// }

// watch(() => ttsa.process, v => {
//   if (v === 'start') {
//     const timer = setTimeout(() => {
//       // setFiger()
//       clearTimeout(timer)
//     }, 1000 * 10)
//   }
// })

onMounted(() => {
  noPullPage()
})

</script>

<style lang="scss" module>
.finger {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 45px;
  height: 45px;
  z-index: 1;
}
</style>
